<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
      canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 aPosition; // 位置坐标
      uniform vec2 uTranslate; // 位移量
      void main() {
        // vec2 movePos = vec2(0.2, 0.2); // 偏移量
        // vec2 scale = vec2(1.5, 1.5); // 缩放比例
        // vec2 newPos = aPosition + movePos; // 位移后，新位置坐标
        // vec2 newPos = aPosition * scale + movePos; // 缩放后，新位置坐标

        // vec2 newPos = aPosition + uTranslate; // 平移后，新位置坐标
        vec2 newPos = aPosition * uTranslate; // 缩放后，新位置坐标
        gl_Position = vec4(newPos, 0.0, 1.0);
        gl_PointSize = 10.0; // 设置点的大小
      }
    </script>

    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置颜色
      }
    </script>
    <script type="module">
      import initShaders from "../utils/initShader.js";

      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");
      if (!gl) {
        console.error("WebGL not supported");
      }

      const program = initShaders(gl);
      /*
        [
          -0.5, 0.5, // 第一个顶点坐标
          -0.5, -0.5, // 第二个顶点坐标
          0.5, -0.5, // 第三个顶点坐标
          0.5, 0.5, // 第四个顶点坐标
        ]
        注意：vertices 数据被包裹在了一个二维数组中，而 WebGL 期望的是一个一维的 Float32Array
        [-0.5, 0.5] + [0.2, 0.2] = [-0.3, 0.7]
        [-0.5, -0.5] + [0.2, 0.2] = [-0.3, -0.3]
        [0.5, -0.5] + [0.2, 0.2] = [0.7, -0.3]
        [0.5, 0.5] + [0.2, 0.2] = [0.7, 0.7]
        这段代码的意思是将每个顶点坐标都加上一个偏移量 [0.2, 0.2]，这样就可以将四边形平移到新的位置。
      */
      const vertices = new Float32Array(
        // 位置坐标
        [
          -0.5,
          0.5, // 第一个顶点坐标
          -0.5,
          -0.5, // 第二个顶点坐标
          0.5,
          -0.5, // 第三个顶点坐标
          0.5,
          0.5, // 第四个顶点坐标
        ]
      );
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      // 获取变量的索引
      const aPosition = gl.getAttribLocation(program, "aPosition");
      // 获取 uniform 变量的索引
      const uTranslate = gl.getUniformLocation(program, "uTranslate");
      const translation = [0.2, 0.2]; // 位移量
      gl.uniform2fv(uTranslate, translation); // 设置 uniform 变量的值

      gl.vertexAttribPointer(
        aPosition,
        2,
        gl.FLOAT,
        false,
        2 * Float32Array.BYTES_PER_ELEMENT,
        0
      );
      gl.enableVertexAttribArray(aPosition); // 启用位置坐标

      // 绘制四边形
      gl.drawArrays(gl.POINTS, 0, 4);
      gl.drawArrays(gl.LINE_LOOP, 0, 4); // 绘制线条
    </script>
  </body>
</html>
